<template>
  <div ref="divRef" class="textItem" :class="{ 'textRow': textOver, 'textRowIE': isIE && textOver }" @click="clickHeight">
    <slot></slot>
  </div>
</template>

<script>
export default {
  data () {
    return {
      textOver: false, // 换行
      disabled: false // 禁止点击
    }
  },
  computed: {
    isIE () {
      return (!!window.ActiveXObject || 'ActiveXObject' in window)
    }
  },
  created () {
    this.$nextTick(() => {
      // 判断文本是否超过3行
      if (this.$refs.divRef) {
        const descHeight = window.getComputedStyle(this.$refs.divRef).height.replace('px', '')
        console.log(descHeight)
        if (descHeight > 56) {
          this.textOver = true
          this.disabled = false
        } else {
          this.textOver = false
          this.disabled = true
        }
      }
    })
  },
  methods: {
    clickHeight () {
      if (this.disabled) return
      this.textOver = !this.textOver
    }
  }
}
</script>

<style lang="scss" scoped>
.textItem {
  word-break: break-all;
  line-height: 1.75rem;
  letter-spacing: 1px;
}
.textRow {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal !important;
  text-overflow: ellipsis;
  word-wrap: break-word;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-height: 3.5rem;
  position: relative;
}
.textRowIE {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal !important;
  text-overflow: ellipsis;
  word-wrap: break-word;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-height: 3.5rem;
  position: relative;
  &::after {
    position: absolute;
    right: -0.25rem;
    bottom: 0;
    content: '...';
    height: 1.75rem;
    line-height: 1.75rem;
    width: 1.25rem;
    font-size: 1.25rem;
    z-index: 999;
  }
}
</style>
